
var chartDom = document.getElementById('dongxibu');
var myChart = echarts.init(chartDom, 'dark');
var option;

var option;

var spirit = 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z  M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35.59V25.237c0-1.145-0.928-2.07-2.07-2.07H-9.265c-1.143,0-2.068,0.926-2.068,2.07 v10.351v3.105c0,1.144,0.926,2.07,2.068,2.07H14.544L14.544,40.764z M8.333,26.272h3.105v4.141H8.333V26.272z M1.087,26.272h3.105 v4.141H1.087V26.272z M-6.159,26.272h3.105v4.141h-3.105V26.272z M-9.265,41.798h69.352v1.035H-9.265V41.798z'
var maxData = 20;
option = {
baseOption: {
    tooltip:{

    },
    timeline: {
                    axisType: 'category',
                    show: true,
                    autoPlay: false,
                    playInterval: 2000,
                    data: ['2018年', '2019年', '2020年','2021年'],
                    bottom:50,
                    left:"12%",
                    progress:{
                        label:{
                            fontSize: 16,
                        },
                        itemStyle: {
                            color: "rgba(242,146,104)"
                        },
                        lineStyle: {
                        color: "rgba(235, 116, 116, 1)"
                        },
                    },
                    lineStyle: {
                        show: true,
                        shadowBlur: 1,
                        width: 4},
                    label: {//轴的文本标签；
                        show: true,
                        normal: {
                            textStyle: {
                                color: '#FFFFFF',
                                fontWeight: "bold",
                                fontSize: 16,
                                    }
                                },
                    emphasis: {//文本高亮的样式：如鼠标悬浮的时候；
                            textStyle: {
                                color: '#fff',
                                fontWeight: "bold",
                                fontSize: 16,
                                }
                            }
                        },
                    checkpointStyle: {
                            color: '#bbb',
                            borderColor: '#777',
                            borderWidth:8
                             },
                    
                },
    backgroundColor: 'rgba(0,21,46)',
    graphic: [
         {
           type:"image",
           left:"34%",
           bottom:"6%",
           style: {
               image:"https://i.loli.net/2021/06/20/PlYriL6m1DwkO2I.png",
               width:"50",
               height:"50",
            }
         },
 {
           type:"image",
           left:"5%",
           bottom:"70%",
           style: {
               image:"https://i.loli.net/2021/06/21/CvlGW8PErboK2YQ.png",
               width:"68",
               height:"45",
            }
         },
         ],
    title: {
        text: '2018年-2021年，中西部地区垃圾焚烧新增项目占比逐年提升',
        left:'21%',
        top: '21%',
        textStyle: {
            fontSize:20,
            color:"#FFFFFF",
            fontFamily: "Microsoft YaHei",
               },
    },
    xAxis: {
       show:false,
        max: maxData,
        splitLine: {show: false},
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        },
        axisLabel: {
            margin: 10
        }
    },
    yAxis: {
        data: ['东部地区', '中西部地区'],
        inverse: true,
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            margin: 20,
            fontSize: 15,
            width: 50,
            fontStyle: "italic",
            fontWeight: "bold"
        }
    },
    grid: {
        height: 200,
        top: '45%',
        left:"20%",
        right:"18%",
        
    },
    series: [{
        // current data
        type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        itemStyle: {
            normal: {
            color: function(params) {
            var colorList = ['rgba(242,146,104)','rgba(136,226,226)'];
                return colorList[params.dataIndex]
                }
            }
        },
        symbolSize: 30,
        markLine: {
            symbol: 'none',
            label: {
                formatter: 'max',
                position: 'start'
            },
            data: [{
                type: 'max'
            }]
        },
        z: 10
    }, {
        // full data
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.2
            }
        },
        label: {
            show: true,
            formatter: function (params) {
                return (params.value / maxData * 100).toFixed(1) + ' %';
            },
            position: 'right',
            offset: [10, 0],
            color: 'green',
            fontSize: 18
        },
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: spirit,
        symbolSize: 30,
        symbolBoundingData: maxData,
        z: 5
    }]
},
   options:[
       {
        title: {
            text: '2018年-2021年，中西部\n地区垃圾焚烧新增项目占比\n逐年提升',
                },
        series: [{
            data: [16.9,3.1]
                },
            {
        // current data
        type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        itemStyle: {
            normal: {
            color: function(params) {
            var colorList = ['rgba(242,146,104)','rgba(136,226,226)'];
                return colorList[params.dataIndex]
                }
            }
        },
        symbolSize: 30,
        markLine: {
            symbol: 'none',
            label: {
                formatter: 'max',
                position: 'start'
            },
            data: [{
                type: 'max'
            }]
        },
        z: 10
    }, {
        // full data
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.1
            }
        },
        label: {
            show: true,
            formatter: function (params) {
                return (params.value / maxData * 100).toFixed(1) + ' %';
            },
            position: 'right',
            offset: [10, 0],
            opacity: 0.5,
            color:'white',
            fontSize: 18
        },
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: spirit,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data: [16.9,3.1],
        z: 5
    },]},
        {
        title: {
            text: '2018年-2021年，中西部\n地区垃圾焚烧新增项目占比\n逐年提升',
            },
        series: [{
            data: [14.7,5.3]
                        },
               {
        // current data
        type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        itemStyle: {
            normal: {
            color: function(params) {
            var colorList = ['rgba(242,146,104)','rgba(136,226,226)'];
                return colorList[params.dataIndex]
                }
            }
        },
        symbolSize: 30,
        markLine: {
            symbol: 'none',
            label: {
                formatter: 'max',
                position: 'start'
            },
            data: [{
                type: 'max'
            }]
        },
        z: 10
    }, {
        // full data
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.1
            }
        },
        label: {
            show: true,
            formatter: function (params) {
                return (params.value / maxData * 100).toFixed(1) + ' %';
            },
            position: 'right',
            offset: [10, 0],
            opacity: 0.5,
            color:'white',
            fontSize: 18
        },
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: spirit,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data: [14.7,5.3],
        z: 5
    },            
                        ]},
        {
        title: {
            text: '2018年-2021年，中西部\n地区垃圾焚烧新增项目占比\n逐年提升',
          },
        series: [{
            data: [12.8,7.2],},
                           {
        // current data
        type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        itemStyle: {
            normal: {
            color: function(params) {
            var colorList = ['rgba(242,146,104)','rgba(136,226,226)'];
                return colorList[params.dataIndex]
                }
            }
        },
        symbolSize: 30,
        markLine: {
            symbol: 'none',
            label: {
                formatter: 'max',
                position: 'start'
            },
            data: [{
                type: 'max'
            }]
        },
        z: 10
    }, {
        // full data
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.1
            }
        },
        label: {
            show: true,
            formatter: function (params) {
                return (params.value / maxData * 100).toFixed(1) + ' %';
            },
            position: 'right',
            offset: [10, 0],
            opacity: 0.5,
            color:'white',
            fontSize: 18
        },
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: spirit,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data:[12.8,7.2],
        z: 5
    },    
            ]},
       {
        title: {
            text: '2021年，垃圾焚烧新增项\n目数量，西部地区首次超\n过东部地区',
                },
        series: [{
            data: [5,15]
                },
                                       {
        // current data
        type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        itemStyle: {
            normal: {
            color: function(params) {
            var colorList = ['rgba(242,146,104)','rgba(136,226,226)'];
                return colorList[params.dataIndex]
                }
            }
        },
        symbolSize: 30,
        markLine: {
            symbol: 'none',
            label: {
                formatter: 'max',
                position: 'start'
            },
            data: [{
                type: 'max'
            }]
        },
        z: 10
    }, {
        // full data
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.1
            }
        },
        label: {
            show: true,
            formatter: function (params) {
                return (params.value / maxData * 100).toFixed(1) + ' %';
            },
            position: 'right',
            offset: [10, 0],
            opacity: 0.5,
            color:'white',
            fontSize: 18
        },
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: spirit,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data: [4.5,13.5],
        z: 5
    }, 
                ]},
      ],
       media: [
            {
                option: {
                    title:{                         
                    },
                }
            },
            {
                query: {
                    maxWidth: 500
                },
                option: {
                    timeline:{
                        left:"6%",
                        right:"6%"
                    },
                    grid: {
                        left:"28%",
                        right:"20%",
                    },    
                },
            }]
};

option && myChart.setOption(option);
